<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <!-- <script src="vue.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div>{{text}}我后面也有值</div>
        <div v-text="text">我这里面也有<li>zheshili</li>
        </div>
        <div>{{html}}</div>
        <div v-html="html">html元素</div>
        <p>
        <p></p>
        </p>
        <div id="demo"></div>
        <div v-bind:id="'1_'+id+'_5'"></div>
        <!--//demo2  demo2_5 -->
        <div v-bind:attr_id="attrid"></div>
        <!---自定义属性也行-->
        <div v-bind:class="class1">class </div>
        <!---如果对应的值是false或者true，true 或 false不赋值  null undefined 属性都不出现-->
        <div v-bind:disabled='dis'>显示与不显示2222</div>
        <!----todo--->
        <button v-bind:disabled="dis">Button</button>
        <div>{{num+'我是后续的输出'}}</div>
        <div>{{ok?'输出ok':'输出不ok'}}</div>
        <div>{{val.trim()}}</div>
        <div>{{echo(val)}}</div>
        <div v-if="result">if 显示？？？？？</div>
        <div v-else="result">else 显示!!!!!!!!!</div>
        <div v-show="result">show的显示？？？？？</div>
        <div v-on:click="click">点击</div>
        <div v-on:click="click2()">点击2</div>
    </div>
</body>
<script>
    let data = {
        text: '模板语法的文本输出',
        html: '<span style="color:red">我是html元素</span>',
        id: 'demo2',
        attrid: 100,
        class1: undefined,//如果是class 系统就挂了，vue不能使用关键字作为属性,
        dis: false,
        num: 1000,//最简单js转化 1000+''
        ok: false,
        val: '  前面有空格，后面也有空格     ',
        result: false,
        click2: function () {//不建议大家写在这,
            alert('data func')
        }

    }
    let vue = new Vue({
        el: "#app",
        data: data,
        methods: {
            echo: function (a) {
                let b = a;
                return b;
            },
            click: function () {
                alert('click')
            }
        }
    });
</script>

</html>